<template>
  <div class="account-design flex-column" v-loading="loading">
    <el-form :model="form" :rules="rules" :label-width="100">
      <el-form-item label="用户账号" prop="user">
        <el-input v-model="form.user" :maxlength="50" placeholder="请输入用户账号"></el-input>
      </el-form-item>
      <el-form-item label="账号密码" prop="password">
        <el-input v-model="form.password" :maxlength="50" placeholder="请输入账号密码"></el-input>
      </el-form-item>
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username" :maxlength="50" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="权限" prop="auth">
        <el-radio-group v-model="form.auth">
          <el-radio-button label="write">可记录</el-radio-button>
          <el-radio-button label="read">可查看</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <div class="form-action text-center">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="save">确认</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import BaseComponent from "@/application/BaseComponent.vue";
export default {
  extends: BaseComponent,
  name: "AccountDesign",
  props: ["design"],
  emits: ["close"],
  data() {
    return { loading: false, form: this.design || {}, rules: [] };
  },
  computed: {},
  created() {
    // this.getData();
  },
  methods: {
    cancel() {
      this.$emit(`close`);
    },
    save() {
      this.loading = true;
      this.$g.ajax.$api("account.save", this.form).then((result) => {
        console.log(result);
        this.loading = false;
        this.$g.toast(result.message, result.code == 0 ? "success" : "error");
        this.cancel();
      });
    }
  }
};
</script>
<style>
.account-design {
}
</style>
